<script setup lang="ts">
import { ref, reactive, toRefs, defineAsyncComponent } from "vue";
import { showLoadingToast } from "vant";
import { HxqImageUpload } from "vue-mobile-hxq";
import imageUpload from "./components/imageUpload.vue";

interface FormObj {
  imgOne: string[];
  imgTwo: string[];
}
const isRequire = ref(true);
const formData = reactive<FormObj>({
  imgOne: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
  imgTwo: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
});
const { imgOne, imgTwo } = toRefs(formData);

const ImgUpload = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    resolve(HxqImageUpload);
  });
});

const dataSource = reactive([
  {
    key: "1",
    name: "name",
    param: "string",
    desc: "图片上传标题",
  },
  {
    key: "2",
    name: "max",
    param: "string",
    desc: "最大上传数量",
  },
  {
    key: "3",
    name: "isRequire",
    param: "boolean",
    desc: "是否必填",
  },
  {
    name: "imgData",
    param: "Array<string>",
    desc: "图片地址数据",
  },
  {
    name: "getImgData",
    param: "function",
    desc: "获取最新数据",
  },
  {
    name: "keyName",
    param: "string",
    desc: "表单提交时的key",
  },
]);

const columns = reactive([
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "说明",
    dataIndex: "desc",
    key: "desc",
  },
  {
    title: "参数",
    dataIndex: "param",
    key: "param",
  },
]);

function getImgData<T>(val: T, key: string, mode: string): void {
  if (mode == "del") {
    console.log(key);

    formData[key] = val;
  } else {
    let data = {
      file: val,
    };
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
    });
    // uploadfiles(data)
    // 	.then(res => {
    // 		if (res.code === 200) {
    // 			formData[key].push(import.meta.env.VITE_BASE_IMGURL + res.msg);
    // 		}
    // 		closeToast();
    // 	})
    // 	.catch(() => {
    // 		closeToast();
    // 	});
  }
}
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">
          用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。
        </div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>
        <pre class="public-content-code">
        <code
          class="language-css"
        >
        import { defineAsyncComponent } from "vue";
        import { showLoadingToast, closeToast } from "vant";
        import { HxqImageUpload } from 'vue-mobile-hxq';
        const ImgUpload = defineAsyncComponent(() => {
          return new Promise(resolve => {
            resolve(HxqImageUpload);
          });
        });
        </code></pre>
      </div>
      <div class="public-outside-title">代码展示</div>
      <div class="public-flex-box">
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        const formData = reactive({
              imgOne: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
              imgTwo: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
        });

        // 模拟修改时回显数据
        setTimeout(() => {
          formData.imgOne = [
            "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg",
            "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg",
          ];
        }, 3000);

        //图片有变化时获取最新数组
function getImgData&lt;T>(val: T, key: string, mode: string): void {
	if (mode == "del") {
		formData[key] = val;
	} else {
		let data = {
			file: val,
		};
		showLoadingToast({
			message: "加载中...",
			forbidClick: true,
		});
		uploadfiles(data)
			.then(res => {
				if (res.code === 200) {
					formData[key].push(import.meta.env.VITE_BASE_IMGURL + res.msg);
				}
				closeToast();
			})
			.catch(() => {
				closeToast();
			});
	}
}
				&lt;ImgUpload
					class="padding_X_15 padding_top_10 public_bottom_line"
					name="房屋产权证/租赁协议/拍卖协议"
					:max="2"
					:isRequire="isRequire"
					:imgData="imgOne"
					@getImgData="getImgData"
					keyName="imgOne" />
        </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">基本参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <imageUpload></imageUpload>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .left-box::-webkit-scrollbar {
    width: 0;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
  }
}
</style>
